<template>
    <view id="page" class="dis_f_co_c_c">
        <view id="header">
            <view class="top">
                <view class="left dis_f_c_c" @click="back_fun">
                    <image :src="$.img_src+'/liao_tian/jtl_hui.png'" mode="aspectFit"></image>
                </view>
                <view class="center dis_f_c_c">
                    <text class="slh_one">{{tlz_info.groupname}}</text>
                </view>
               
            </view>
         
        </view>
        <view id="section">
            <scroll-view scroll-y="true" :scroll-top="scroll_top" @scrolltoupper="scrolltoupper_fun" upper-threshold="100"
                scroll-with-animation>
                <view class="more_data" :class="{'show':more_data_show}">
                    <more-data :list="list" :more="more_data">
                        <text>暂无聊天记录</text>
                    </more-data>
                </view>
                <view class="ul">
                    <block v-for="(item,index) in list" :key="index">
                        <view class="li">
                            <view class="li_top dis_f_c_c">
                                <view class="time dis_f_c_c">
                                    <text>{{item.time}}</text>
                                </view>
                            </view>
                            <view class="li_bottom dis_f_r mine" v-if="user_id==item.user_id">
                                <view class="left">
                                    <view class="name slh_one dis_f_r">
                                        <text>{{item.member.nickname}}</text>
                                    </view>
                                    <view class="content">
                                        <text v-html="item.content"></text>
                                        <!-- <rich-text :nodes="item.content"></rich-text> -->
                                    </view>
                                </view>
                                <view class="right" @click="geDetail(item.user_id)">
                                    <image class="avatar" :src="item.member.avatar" mode="aspectFill"></image>
                                    <image class="sex" :src="$.img_src+'/liao_tian/nan.png'" mode="aspectFit" v-if="item.member.gender==1"></image>
                                    <image class="sex" :src="$.img_src+'/liao_tian/nv.png'" mode="aspectFit" v-else></image>
                                </view>
                            </view>
                            <view class="li_bottom dis_f to" v-else>
                                <view class="left" @click="geDetail(item.user_id)">
                                    <image class="avatar" :src="item.member.avatar" mode="aspectFill"></image>
                                    <image class="sex" :src="$.img_src+'/liao_tian/nan.png'" mode="aspectFit" v-if="item.member.gender==1"></image>
                                    <image class="sex" :src="$.img_src+'/liao_tian/nv.png'" mode="aspectFit" v-else></image>
                                </view>
                                <view class="right">
                                    <view class="name slh_one">
                                        <text>{{item.member.nickname}}</text>
                                    </view>
                                    <view class="content">
                                        <text v-html="item.content"></text>
                                        <!-- <rich-text :nodes="item.content"></rich-text> -->
                                    </view>
                                </view>
                            </view>
                        </view>
                    </block>
                </view>
            </scroll-view>
        </view>
        <view id="footer">
            <view class="center box dis_f_l_c">
                <view class="left">
                    <input type="text" confirm-type="send" v-model="content" placeholder="输入消息" placeholder-class="placeholder"
                        @focus="show=false;" maxlength="100" @confirm="fa_song_fun" />
                </view>
                <view class="right dis_f_sb_c">
                    <image class="biao_qing" :src="$.img_src+'/liao_tian/biao_qing.png'" mode="aspectFit" @click="show=true;"></image>
                    <image class="tu_pian" :src="$.img_src+'/liao_tian/tu_pian.png'" mode="aspectFit" @click="tu_pian_fun"></image>
                </view>
            </view>
            <view class="bottom" v-show="show">
                <view class="ul dis_f_w">
                    <view class="li" v-for="(item,index) in bq_data" :key="index">
                        <view class="li_section box">
                            <image :src="'http://chat.imyouz.com/Static/asset/layui/images/face/'+index+'.gif'" mode="aspectFit"
                                @click="biao_qing_fun(item)"></image>
                        </view>
                    </view>
                </view>
            </view>
        </view>

		

		
		
    </view>
</template>

<script>
    // 是否还有更多数据的组件
    import moreData from "@/components/more-data.vue";
    export default {
        // 组件
        components: {
            // 是否还有更多数据的组件
            moreData,
        },
        data() {
            return {
                // 公用的js
                $: this.$,
                // 表情的数据列表
                bq_data: this.$.bq_data,

                // 用户的token
                token: "",
                // 用户的user_id
                user_id: "",
                // 用户信息
                user_info: "",
                // 讨论组id
                tlz_id: "",
                // 讨论组的信息
                tlz_info: "",

                // @成员的id数组
                ids: [],
                // @成员的用户信息数组
                user_info_list: [],


                // 滚动条的位置
                scroll_top: 0,

                // 讨论组的聊天记录
                list: [],
                page: 1,
                page_length: 10,
                more_data: true,
                more_data_show: false,

                // 是否聚焦
                focus: false,
                // 输入的内容
                content: "",

                // 是否显示表情选择框
                show: false,
                // 是否显示解散提示框
                jie_san_show: false,
                // 是否显示退出提示框
                tui_chu_show: false,

                // 是否刷新页面
                shua_xin: false,
            }
        },
        // 页面加载
        onLoad(e) {
			
            /* e = {
                token: "5dfc46835387a5dfc46835387d1",
                user_id: "1",
                tlz_id: "10038",
                ids: "100002,100003,100004",
                content: "123",
            } */
        
            this.user_id = e.user_id;
            this.tlz_id = e.tlz_id;
            //this.ids = e.ids.split(",");
            this.content = e.content;
			this.token = e.token;
			this.$.set_data("token", this.token);
            // 获取讨论组的信息
            this.get_tlz_info_fun();
            // 存储用户id和token
            this.$.set_data("user_id", e.user_id);
            // 获取用户信息
            this.$.get_user_info((user_info) => {
                this.user_info = user_info;
				//console.log(user_info.chat_token);
				//this.token = user_info.chat_token;
				
              /* this.get_user_info_list_fun(this.ids, 0, (user_info_obj) => {
                    this.user_info_list.push(user_info_obj)
                }); */
            });
            // 获取讨论组的聊天记录
            this.get_list_data_fun(true);
			console.log(this.user_info_list);
            this.socket_fun();
        },
        // 页面显示
        onShow() {
            if (this.shua_xin) {

            } else {
                this.shua_xin = true;
            }
            // #ifdef H5
            document.title = "讨论组";
            // #endif
        },
        // 方法
        methods: {
            // 获取讨论组的聊天记录,br是否滚动到最底部
            get_list_data_fun(br = false) {
                this.$.ajax("GET", "/api/Chat/one_record", {
                    friend_id: this.tlz_id,
					user_id: this.user_id,
                    p: this.page,
                }, (res) => {
                    if (res.code == 1) {
                        let new_list = res.data.records.reverse();
                        if (new_list.length < this.page_length) {
                            this.more_data = false;
                        }
                        new_list.forEach((obj) => {
                            obj.content = this.$.emotion(obj.content);
                            if (obj.member.avatar.substring(0, 4) != "http") {
                                obj.member.avatar = "http://imyouz.com" + obj.member.avatar;
                            }
                        });
                        let list = this.list;
                        new_list = new_list.concat(list);
                        this.list = new_list;
                        if (br) {
                            this.$nextTick(() => {
                                this.scroll_bottom_fun(200);
                            })
                        }
                    } else {
                        this.$.ti_shi(res.msg);
                    }
                })
            },
            // 获取讨论组信息
            get_tlz_info_fun() {
                this.$.ajax("GET", "/api/Chat/chatone", {
                    id: this.tlz_id,
                }, (res) => {
                    if (res.code == 1) {
                        this.tlz_info = res.data;
						
                    } else {
                        this.$.ti_shi(res.msg);
                    }
                })
            },
            // 获取@的用户列表
            get_user_info_list_fun(list, index, success) {
                if (list.length > index) {
                    this.$.ajax("GET", "/api/user/detail", {
                        user_id: list[index],
                    }, (res) => {
                        if (res.code == 1) {
                            let user_info = res.data;
                            if (user_info.avatar.substring(0, 4) != "http") {
                                user_info.avatar = "http://imyouz.com" + user_info.avatar;
                            }
                            success(user_info);
                            this.get_user_info_list_fun(list, index + 1, success);
                        } else {
                            this.$.ti_shi(res.msg);
                        }
                    })
                }
            },
            // 即时通讯
            socket_fun() {
                uni.connectSocket({
                    url: 'ws://chat.imyouz.com?token=' + this.token,
                });
                uni.onSocketOpen((res) => {
                    console.log('WebSocket连接已打开！');
                    uni.onSocketMessage((res) => {
                        let data = JSON.parse(res.data);
						console.log('接受到消息');
						console.log(data)
                        if (data.type == "friend") {
                            var date = new Date(data.timestamp);
                            var time = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate() +
                                " " + date.getHours() + ":" +
                                (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes());
                            let content = this.$.emotion(data.content);
                            this.list.push({
                                content: content,
                                group_id: data.id,
                                member: {
                                    avatar: data.avatar,
                                    gender: data.gender,
                                    id: data.fromid,
                                    nickname: data.username,
                                },
                                time: time,
                                user_id: data.fromid,
                            });
                            this.scroll_bottom_fun();
                        }
                    });
					let Timer = setInterval(()=>{
						uni.sendSocketMessage({
						    data: '{"type":"ping"}',
						    success: (res) => {
						    }
						});
						console.log("ping...");
					},10000);
				
				});
            },
            // 左上角的返回
            back_fun() {
				let URL=location.href+'&action=back'
				location.replace(URL)
            },
			geDetail(user_id){
				let URL=location.href+'&action=godetail&godetail_user_id='+user_id
				location.replace(URL)
				console.log(user_id);
			},
            // @的点击事件
            at_fun() {

            },
            // close的点击事件
            close_fun() {
                // 判断身份，如果是组长，解散，如果是成员，退出
                if (this.tlz_info.user_id == this.user_id) {
                    this.jie_san_show = true;
                } else {
                    this.tui_chu_show = true;
                }
            },
            // 解散的点击事件
            jie_san_fun() {
                this.jie_san_show = false;
            },
            // 退出的点击事件
            tui_chu_fun() {
                this.tui_chu_show = false;
            },
            // 讨论组的点击事件
            tlz_fun() {

            },
            // 点击发送
            fa_song_fun() {
                let content = this.content;
                if (this.$.is_text(content)) {
                    let user_info = this.user_info;
                    let tlz_info = this.tlz_info;
                    let at_str = "";
                    if (this.user_info_list.length) {
                        this.user_info_list.forEach((obj) => {
                            at_str += "@" + obj.nickname + " ";
                        });
                    }
                    content = at_str + content;
                    let form_data = {
                        "type": "chatMessage",
                        "data": {
                            "mine": {
                                "username": user_info.username,
                                "avatar": user_info.avatar,
                                "id": user_info.id,
                                "mine": true,
                                "content": content
                            },
                            "to": {
                                "id": tlz_info.id,
                                "groupname": tlz_info.groupname,
                                "avatar": tlz_info.avatar,
                                "name": tlz_info.groupname,
                                "type": "friend"
                            },
                            "token": this.token
                        }
                    }
                    uni.sendSocketMessage({
                        data: JSON.stringify(form_data),
                        success: (res) => {
                            if (res.errMsg == "sendSocketMessage:ok") {
                                var date = new Date();
                                var time = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate() +
                                    " " + date.getHours() + ":" +
                                    (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes());
                                content = this.$.emotion(content);
                                this.list.push({
                                    content: content,
                                    group_id: tlz_info.id,
                                    member: {
                                        avatar: user_info.avatar,
                                        gender: user_info.gender,
                                        id: user_info.id,
                                        nickname: user_info.username,
                                    },
                                    time: time,
                                    user_id: user_info.id,
                                });
                                this.ids = [];
                                this.user_info_list = [];
                                this.content = "";
                                this.scroll_bottom_fun();
                            } else {
                                this.$.ti_shi("发送失败！");
                            }
                        }
                    });
					
					
                } else {
                    this.$.ti_shi("请输入消息");
                }
            },
            // 表情的点击事件
            biao_qing_fun(item) {
                let content = this.content + " " + item.content;
                if (content.length > 100) {
                    content = content.substring(0, 100);
                    this.$.ti_shi("长度超出限制");
                }
                this.content = content;
            },
            // 图片的点击事件
            tu_pian_fun() {
                this.$.add_img(1, (res) => {
                    if (res.code == 1) {
                        let user_info = this.user_info;
                        let tlz_info = this.tlz_info;
                        let content = "img[" + res.data.url + "]";
                        let form_data = {
                            "type": "chatMessage",
                            "data": {
                                "mine": {
                                    "username": user_info.username,
                                    "avatar": user_info.avatar,
                                    "id": user_info.id,
                                    "mine": true,
                                    "content": content
                                },
                                "to": {
                                    "id": tlz_info.id,
                                    "groupname": tlz_info.groupname,
                                    "avatar": "",
                                    "name": tlz_info.groupname,
                                    "type": "group"
                                },
                                "token": this.token
                            }
                        }
                        uni.sendSocketMessage({
                            data: JSON.stringify(form_data),
                            success: (res) => {
                                if (res.errMsg == "sendSocketMessage:ok") {
                                    var date = new Date();
                                    var time = date.getFullYear() + "-" + (date.getMonth() + 1) +
                                        "-" + date.getDate() +
                                        " " + date.getHours() + ":" +
                                        (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes());
                                    content = this.$.emotion(content);
                                    this.list.push({
                                        content: content,
                                        group_id: tlz_info.id,
                                        member: {
                                            avatar: user_info.avatar,
                                            gender: user_info.gender,
                                            id: user_info.id,
                                            nickname: user_info.username,
                                        },
                                        time: time,
                                        user_id: user_info.id,
                                    });
                                    this.scroll_bottom_fun();
                                } else {
                                    this.$.ti_shi("发送失败！");
                                }
                            }
                        });
                    } else {
                        this.$.ti_shi(res.msg);
                    }
                })
            },

            // 滚动到顶部时触发
            scrolltoupper_fun() {
                return false;
                this.more_data_show = true;
                if (this.more_data) {
                    this.page++;
                    // 获取讨论组的聊天记录
                    this.get_list_data_fun();

                    // 延迟关闭刷新动画
                    setTimeout(() => {
                        uni.stopPullDownRefresh();
                    }, 1000);
                } else {
                    setTimeout(() => {
                        this.more_data_show = false;
                    }, 1500);
                }
            },
            // 页面滚动到最底部
            scroll_bottom_fun(time = 100) {
                this.$nextTick(() => {
                    const query = uni.createSelectorQuery().in(this);
                    query.select('#section .ul').boundingClientRect(data => {
                        setTimeout(() => {
                            // 滚动条的位置
                            this.scroll_top = data.height;
                        }, time);
                    }).exec();
                })
            },
        },
        // 页面卸载
        onUnload() {

        },
        // 触发下拉刷新
        onPullDownRefresh() {

        },
        // 页面上拉触底事件的处理函数
        onReachBottom() {

        },
    }
</script>

<style lang="scss" scoped>
    #page {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    #header {
        flex: none;
        width: 100%;
        background: #fff;
        position: relative;
        z-index: 999;

        .top {
            height: 90rpx;
            position: relative;
            padding: 0 160rpx;

            .left {
                position: absolute;
                top: 0;
                left: 0;
                width: 90rpx;
                height: 90rpx;

                image {
                    width: 22rpx;
                    height: 40rpx;
                }
            }

            .center {
                min-width: 0;
                flex: 1;
                height: 100%;
                font-size: 34rpx;
                color: #323232;
            }

            .right {
                position: absolute;
                top: 0;
                right: 0;
                height: 90rpx;
                width: 110rpx;
                padding: 0 40rpx;

                image {
                    width: 40rpx;
                    height: 40rpx;
                }
            }
        }

        .bottom {
            padding: 0 30rpx;
            height: 100rpx;
            background: #E5E5E5;
            font-size: 30rpx;
            color: #333333;

            image {
                flex: none;
                width: 60rpx;
                height: 60rpx;
                margin-right: 20rpx;
            }
        }
    }

    #section {
        width: 100%;
        flex: 1;
        position: relative;

        scroll-view {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        .more_data {
            height: 0;
            transition: height 0.6s;
            overflow: hidden;

            &.show {
                height: 90rpx;
            }
        }

        .ul {
            padding-bottom: 20rpx;

            .li {
                padding: 0 20rpx;

                .li_top {
                    padding: 20rpx 0;

                    .time {
                        height: 50rpx;
                        border-radius: 20rpx;
                        background: #E6E6E6;
                        padding: 0 50rpx;
                        font-size: 24rpx;
                        color: #787878;
                    }
                }

                .li_bottom {
                    .avatar {
                        width: 80rpx;
                        height: 80rpx;
                        border-radius: 10rpx;
                        margin-bottom: 8rpx;
                    }

                    .sex {
                        width: 30rpx;
                        height: 30rpx;
                        margin: auto;
                    }

                    .name {
                        font-size: 26rpx;
                        color: #323232;
                        margin-bottom: 10rpx;
                    }

                    .content {
                        padding: 20rpx;
                        border-radius: 20rpx;
                        background: #fff;
                        font-size: 32rpx;
                        color: #323232;
                        line-height: 50rpx;
                    }

                    &.to {
                        padding-right: 20rpx;

                        .left {
                            flex: none;
                            margin-right: 20rpx;
                        }

                        .right {}
                    }

                    &.mine {
                        padding-left: 20rpx;

                        .left {
                            .content {
                                background: #C8B4FF;
                            }
                        }

                        .right {
                            margin-left: 20rpx;
                            flex: none;
                        }
                    }
                }
            }
        }
    }

    #footer {
        flex: none;
        width: 100%;
        position: relative;
        z-index: 999;

        .top {
            height: 110rpx;
            background: #fff;

            .left {
                flex: none;
                font-size: 26rpx;
                color: #666;
                padding: 0 30rpx;
                height: 100%;
            }

            .ul {
                height: 100%;
                padding: 15rpx 0;
                flex: 1;
                overflow: auto;
                white-space: nowrap;

                .li {
                    display: inline-block;
                    vertical-align: top;
                    width: 80rpx;
                    height: 80rpx;
                    margin-right: 20rpx;

                    &:last-child {
                        margin-right: 0;
                    }

                    image {
                        width: 100%;
                        height: 100%;
                        border-radius: 10rpx;
                    }
                }
            }

            .right {
                height: 100%;
                flex: none;
                font-size: 32rpx;
                color: #503278;
                padding: 0 30rpx;
            }
        }

        .center {
            background: #fff;
            border-top: 1px solid #E5E5E5;
            padding: 20rpx;

            .left {
                flex: 1;
                border: 1px solid #E5E5E5;
                border-radius: 20rpx;

                input {
                    width: 100%;
                    height: 80rpx;
                    padding: 0 20rpx;
                    font-size: 26rpx;
                    line-height: 50rpx;
                }
            }

            .right {
                flex: none;
                width: 140rpx;
                padding-left: 20rpx;

                .biao_qing {
                    width: 54rpx;
                    height: 54rpx;
                }

                .tu_pian {
                    width: 58rpx;
                    height: 45rpx;
                }

                .btn {
                    width: 100%;
                    height: 60rpx;
                    border-radius: 10rpx;
                    color: #fff;
                    background: #503278;
                    font-size: 30rpx;
                }
            }
        }

        .bottom {
            .ul {
                overflow: auto;
                max-height: 300rpx;

                .li {
                    width: 10%;
                    position: relative;
                    height: 0;
                    padding-bottom: 10%;

                    .li_section {
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        padding: 20rpx;

                        image {
                            width: 100%;
                            height: 100%;
                        }
                    }
                }
            }
        }
    }

    .ti_shi {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1000;
        background: rgba(0, 0, 0, 0.3);
        padding: 0 20rpx;

        .section {
            background: #fff;
            border-radius: 20rpx;

            .top {
                height: 120rpx;
                font-size: 34rpx;
                color: #323232;
            }

            .center {
                padding: 46rpx 32rpx;
                line-height: 50rpx;
                font-size: 32rpx;
                color: #323232;
                border-top: 1px solid #DCDCDC;
                border-bottom: 1px solid #DCDCDC;
            }

            .bottom {
                height: 120rpx;
                padding: 20rpx;

                .btns {
                    width: 100%;
                    height: 100%;
                    overflow: hidden;
                    border-radius: 20rpx;

                    .btn {
                        width: 50%;
                        height: 100%;
                        font-size: 32rpx;
                        color: #fff;
                    }

                    .left {

                        background: #E6E6E6;
                    }

                    .right {
                        background: #503278;
                    }
                }
            }
        }
    }
</style>
